<template>
	<view>

		<view class="pageContainer">
			<!-- 菜单 -->
			<view class="messageMenu_box">
				<!-- #ifdef MP-WEIXIN -->
				<view class="menuItem">
					<image src="/static/worker/workerAdd1.png" mode=""></image>
					<view class="menuCon" @click="contactClick">
						<view class="menuTit">手机通讯录</view>
						<u-icon name="arrow-right" color="#999" size="32"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<view class="menuItem" @click="toPeopleAdd">
					<image src="/static/worker/workerAdd2.png" mode=""></image>
					<view class="menuCon">
						<view class="menuTit">手动添加</view>
						<u-icon name="arrow-right" color="#999" size="32"></u-icon>
					</view>
				</view>
				<view class="menuItem" @click="goPage('./workerOld')">
					<image src="/static/worker/workerAdd3.png" mode=""></image>
					<view class="menuCon">
						<view class="menuTit">添加老员工</view>
						<u-icon name="arrow-right" color="#999" size="32"></u-icon>
					</view>
				</view>
				<button class="menuItem" hover-class="none" open-type="share">
					<image src="/static/worker/workerAdd4.png" mode=""></image>
					<view class="menuCon">
						<view class="menuTit">微信邀请</view>
						<u-icon name="arrow-right" color="#999" size="32"></u-icon>
					</view>
				</button>
			</view>
		</view>

		<!-- 手动添加弹窗 -->
		<u-popup v-model="addShow" mode="bottom" border-radius="20" duration="0" safe-area-inset-bottom closeable close-icon-size="40">
			<form @submit="formSubmit">
				<view class="addPop_box">
					<view class="addPop_tit">
						手动添加
					</view>
					<view class="handleList_box">
						<view class="handleList_con">
							<view class="handleLabel handleLabelLong">工友姓名：</view>
							<view class="handleList">
								<view class="pickerCon">
									<input name="name" v-model="formData.name" placeholder="请输入工友姓名"
										placeholder-class="placeholderColor">
								</view>
							</view>
						</view>
						<view class="handleList_con">
							<view class="handleLabel handleLabelLong">上班工资：</view>
							<view class="handleList">
								<view class="pickerCon">
									<input type="digit" name="salary" v-model="formData.salary" placeholder="请输入上班工资"
										placeholder-class="placeholderColor">
									<text>元/工</text>
								</view>
							</view>
						</view>
						<view class="handleList_con">
							<view class="handleLabel handleLabelLong">加班工资：</view>
							<view class="handleList">
								<view class="pickerCon">
									<input type="digit" name="overtime_salary" v-model="formData.overtime_salary"
										placeholder="请输入加班工资" placeholder-class="placeholderColor">
									<text>元/小时</text>
								</view>
							</view>
						</view>
					</view>
					<view class="handlePost_con">
						<button class="completeBtn" form-type="submit" hover-class="none">完成添加</button>
					</view>
				</view>
			</form>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 手动添加弹窗
				addShow: false,
				// 表单
				formData: {
					name: '',
					salary: '',
					overtime_salary: '',
				},
			}
		},
		onShareAppMessage() {
			return {
				title: '带班邀请您加入工地',
				imageUrl: '/static/sharePic.jpg',
				path: '/pages/worksite/worksiteJoin?type=1&project_id=' + this.defaultWorksite.project_id
			}
		},
		onShow() {},
		methods: {
			
			toPeopleAdd(){
				uni.navigateTo({
					url: '/pages/worker/peopleAdd'
				})
			},
			// 选择通讯录
			contactClick() {
				// #ifdef MP-WEIXIN
				var _this = this;
				wx.chooseContact({
					success: function(res) {
						console.log(JSON.stringify(res));
						_this.$u.post('/api/project.member/add_do', {
							project_id: _this.defaultWorksite.project_id,
							name: res.displayName,
							mobile: res.phoneNumber,
							salary: 0,
							work_class: '',
							img: '',
						}).then(res => {
							console.log(res);
							uni.showModal({
								title: '提示',
								content: res.msg,
								cancelText: '返回',
								confirmText: '继续添加',
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										_this.contactClick();
									} else if (res.cancel) {
										// console.log('用户点击取消');
										uni.navigateBack({
											delta: 1
										})
									}
								}
							});
						}).catch(res => {
							console.log(res);
						})
					},
					fail: function(err) {
						// console.log(JSON.stringify(err))
						uni.showModal({
							title: '添加失败',
							content: '您的微信尚未开启获取通讯录权限',
							showCancel: false
						});
					}
				})
				// #endif
				
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 提交
			formSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;

				if (!formData.name) {
					uni.showModal({
						content: '姓名不能为空',
						showCancel: false,
					})
					return;
				}

				// if (!formData.salary) {
				// 	uni.showModal({
				// 		content: '工资不能为空',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }

				// if (!formData.mobile) {
				// 	uni.showModal({
				// 		content: '电话不能为空',
				// 		showCancel: false,
				// 	})
				// 	return;
				// } else {
				// 	var testMobile = _this.$u.test.mobile(formData.mobile);
				// 	// console.log(testMobile)
				// 	if (testMobile == false) {
				// 		uni.showModal({
				// 			content: '你输入的电话格式不正确',
				// 			showCancel: false,
				// 		})
				// 		return;
				// 	}
				// }

				_this.formData = formData;
				_this.$u.throttle(_this.submitForm, 3000);
			},

			// 提交接口
			submitForm() {
				var _this = this;
				_this.$u.post('/api/project.member/add_do', {
					project_id: _this.defaultWorksite.project_id,
					name: _this.formData.name,
					salary: _this.formData.salary,
					overtime_salary: _this.formData.overtime_salary,
					mobile:'',
					work_class: '',
					img: '',
				}).then(res => {
					console.log(res);
					uni.showModal({
						title: '提示',
						content: res.msg,
						cancelText: '返回',
						confirmText: '继续添加',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								// 清空数据
								_this.formData = {
									name: '',
									salary: '',
									mobile: '',
								}
							} else if (res.cancel) {
								// console.log('用户点击取消');
								uni.navigateBack({
									delta: 1
								})
								_this.addShow = false;
							}
						}
					});
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	/* 菜单 */
	.messageMenu_box {
		padding: 0 30rpx;
	}

	.menuItem {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menuItem:last-child .menuCon {
		border-bottom: 0;
	}

	.menuItem image {
		width: 100rpx;
		height: 100rpx;
	}

	.menuCon {
		flex: 2;
		padding: 40rpx 0;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menuItem .menuTit {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.menuItem .menuDesc {
		font-size: 24rpx;
		color: $uni-color-text;
	}

	// 手动添加弹窗
	.addPop_box {
		padding: 0 30rpx;
	}

	.addPop_tit {
		padding: 40rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		text-align: center;
		overflow: hidden;
	}

	.handleList_box {
		padding: 15rpx 0;
	}
	
</style>
